<template>
  <view class="container" style="height: 100vh;background: #f8f8f8;">
    <view
      class="cover-container"
    >
      <view v-if="isAdmin == false && dormitoryInfo.ridersBillInfo.billType" class="history-section icon" style="padding-bottom: 30rpx;background: linear-gradient(to bottom left, #FFA493, #FF0B46);position:relative;"  @click="goInfo">
        <view class="sec-header" style="display: flex;justify-content: space-between;margin-bottom: 20rpx">
          <text style="font-size: 36rpx;font-weight: 550">{{dormitoryInfo.ridersBillInfo.billType==1?'入住':'退宿'}}服务</text>
          <text style="font-size: 34rpx;text-align:right;position: absolute;right: 0;top: 0;padding: 15rpx 35rpx;border-bottom: 1px solid #fff;border-left: 1px solid #fff;" v-if="dormitoryInfo.ridersLodging.paymentMethod == '1'" :style="{background:dormitoryInfo.ridersBillInfo.isPay == 0?'#ff9900':'#19be6b',color:'#fff'}" class="pay-tag">{{ dormitoryInfo.ridersBillInfo.isPay == 0?'待支付':'已支付' }}</text>

<!--          <text style="flex:1;text-align:right;padding: 0 35rpx">宿舍：3-301-1</text>-->
        </view>
        <view class="sec-header" >
          <text>
<!--            <text style="font-weight: 550;font-size: 32rpx;color: #ffffff;">{{this.dormitoryInfo.ridersBillInfo.billType==1?'入住':'退宿'}}</text>-->
            当月账单</text>
          <text style="flex:1;text-align:right;padding: 0 35rpx">宿舍：{{dormitoryInfo.ridersLodging.roomNo}}-{{dormitoryInfo.ridersLodging.bedNo}}</text>
        </view>
        <view style="margin: 15rpx;border-radius: 10rpx;background: #fff;padding:20rpx">
          <view class="sec-header" style="padding-bottom: 30rpx;">
            <view class="sec-header-inner" >
              <view  style="display: flex;">共计：<text style="text-align: center;font-size: 38rpx;font-weight: 550">{{ toNumber('totalAmount')}}</text><text style="font-size: 24rpx;margin-left: 10rpx;"> (单位：元)</text></view>
              <text style="font-size: 24rpx;margin-left: 100rpx;"> 支付方式：{{ dormitoryInfo.ridersLodging.paymentMethod == '1'?'微信支付': '工资代扣'}}</text>
            </view>
          </view>
          <view class="expenses-box" >
            <view class="expenses-box-item" >
              <text  style="text-align: center;font-size: 38rpx;font-weight: 550">{{ toNumber('rent') }}</text>
              <text style="text-align: center">住宿费</text>
            </view>
            <view class="expenses-box-item">
              <text  style="text-align: center;font-size: 38rpx;font-weight: 550">{{ toNumber('electricCharge') + toNumber('waterRate')}}</text>
              <text style="text-align: center">水电费</text>
            </view>
            <view class="expenses-box-item">
              <text style="text-align: center;font-size: 38rpx;font-weight: 550">{{ toNumber('otherExpenses') + toNumber('maintenanceCost') + toNumber('heatingFee') + toNumber('gasCost')}}</text>
              <text style="text-align: center">其他费用</text>
            </view>
          </view>
        </view>
      </view>
<!--      <view class="history-section icon" style="padding-bottom: 30rpx;background: linear-gradient(to bottom left, #FD9481, #F7C264);">-->
<!--        <view class="sec-header">-->
<!--          <text class="yticon icon-iconfontweixin"></text>-->
<!--          <text>预支工资</text>-->
<!--          <text style="flex:1;text-align:right;padding: 0 35rpx;">预支金额：560元</text>-->
<!--        </view>-->
<!--        <view style="margin: 15rpx;border-radius: 10rpx;background: #fff;padding:20rpx">-->
<!--          <view class="sec-header" style="padding-bottom: 30rpx;">-->
<!--            &lt;!&ndash;					<text class="yticon icon-lishijilu"></text>&ndash;&gt;-->
<!--            <text>生活费： <text style="font-size: 24rpx;margin-left: 10rpx;"> 560元</text></text>-->
<!--          </view>-->
<!--          <view style="display: flex;justify-content: space-around;align-self: center;">-->
<!--            <view style="display: flex;justify-content: center;align-self: center;flex-direction: column;font-size:24rpx">-->
<!--              <text style="text-align: center">2024-7-1</text>-->
<!--              <text style="text-align: center">申请时间</text>-->
<!--            </view>-->
<!--            <view style="display: flex;justify-content: center;align-self: center;flex-direction: column;font-size:24rpx">-->
<!--              <text style="text-align: center">待审核</text>-->
<!--              <text style="text-align: center">审核状态</text>-->
<!--            </view>-->
<!--            <view style="display: flex;justify-content: center;align-self: center;flex-direction: column;font-size:24rpx">-->
<!--              <text style="text-align: center">李四</text>-->
<!--              <text style="text-align: center">审核人员</text>-->
<!--            </view>-->
<!--          </view>-->

<!--        </view>-->
<!--      </view>-->

      <view class="history-section icon" style="padding-bottom: 30rpx;background: linear-gradient(to bottom left, #49DEEF, #60B7EE);"  v-if="isAdmin">
        <view class="sec-header">
          <text class="yticon icon-pinglun-copy"></text>
          <text>住宿管理</text>
          <text style="flex:1;text-align:right;padding: 0 35rpx;"></text>
        </view>
        <view style="margin: 15rpx;border-radius: 10rpx;background: #fff;padding:10rpx">
          <view class="cate-section">
            <view class="cate-item"  @click="cateItem(0)">
              <image :src="`${proxyUrl}/static/temp/rzdj.png`"></image>
              <text>入住审核</text>
            </view>
            <view class="cate-item"  @click="cateItem(1)">
              <image :src="`${proxyUrl}/static/temp/zsdj.png`"></image>
              <text>退宿审核</text>
            </view>
            <view class="cate-item" @click="cateItem(2)">
              <image :src="`${proxyUrl}/static/temp/tssq.png`"></image>
              <text>维修上报</text>
            </view>
            <view class="cate-item"  @click="cateItem(3)">
              <image :src="`${proxyUrl}/static/temp/location.png`"></image>
              <text>宿舍定位</text>
            </view>
<!--            <view class="cate-item" @click="cateItem(3)">-->
<!--              <image :src="`${proxyUrl}/static/temp/gongzi.png`"></image>-->
<!--              <text>安全检查</text>-->
<!--            </view>-->
<!--            <view class="cate-item">-->
<!--              <image :src="`${proxyUrl}/static/temp/c8.png`"></image>-->
<!--              <text>卫生评比</text>-->
<!--            </view>-->
          </view>
<!--          <list-cell  iconColor="#54b4ef" title="入住待审核 ：张三"></list-cell>-->
<!--          <list-cell  iconColor="#54b4ef" title="退宿待审核 ：李四"></list-cell>-->
<!--          <list-cell  iconColor="#54b4ef" title="退宿待审核 ：王五"></list-cell>-->
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import listCell from '@/components/mix-list-cell';
import {
  mapState
} from 'vuex';
import * as consts from "@/utils/constant.js";

export default {
  components: {
    listCell
  },
  data(){
    return {
      proxyUrl:(window.location.href.includes('/xsdcrm-wechat-ui/')?'/xsdcrm-wechat-ui/': ''),
      openId:uni.getStorageSync("openId"),
      isAdmin:JSON.parse(uni.getStorageSync("isAdmin")?uni.getStorageSync("isAdmin"):false),
      dormitoryInfo:
        {
          ridersBillInfo:{},
          ridersLodging:{}
        }

    }
  },
  onShow(){
    this.getLodgingListByOpenIdAndMonth()
  },
  onLoad(){
    console.log('this.isAdmin',this.isAdmin)
    this.getLodgingListByOpenIdAndMonth()
  },
  computed: {

  },
  methods: {
    cateItem(type) {
      if (type == 0 ) {
        uni.navigateTo({
          url: `/pages/serve/audit/webIndex?type=`+0
        })
      } else if (type == 1) {
        uni.navigateTo({
          url: `/pages/serve/audit/webIndex?type=`+1
        })
      } else if (type == 2) {
        uni.navigateTo({
          url: `/pages/serve/repair/webIndex?type=`+1
        })
      } else if (type == 3) {
        jWeixin.scanQRCode({
          needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
          scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码，默认二者都有
          success: (res) => {
            //扫码返回的结果
            let data_code = res.resultStr
            let str = data_code;
            let match = str.match(/[?&]id=([^&]+)/);
            if (match) {
              let dormitoryId = match[1];
              console.log(dormitoryId); // 输出 "1"
              uni.navigateTo({
                url: `/pages/location/webIndex?dormitoryId=${dormitoryId}`
              })
            } else {
              console.log("未找到匹配的参数值");
              uni.showToast({
                title: "未查询到宿舍信息",
                icon: "none",
              });
            }
          },
          cancel: () => {

          },
        });
      } else if (type == 4) {
        jWeixin.scanQRCode({
          needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
          scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码，默认二者都有
          success: (res) => {
            //扫码返回的结果
            let data_code = res.resultStr
            let str = data_code;
            let cleanedUrl = str.replace(/%22%7D%7D$/, '');  // 清理结尾的非法字符
            let match = cleanedUrl.match(/[?&]id=([^&]+)/);
            if (match) {
              let dormitoryId = match[1];
              console.log(dormitoryId); // 输出 "1"
              uni.navigateTo({
                url: `/pages/serve/inspection/webIndex?dormitoryId=${dormitoryId}`
              })
            } else {
              console.log("未找到匹配的参数值");
              uni.showToast({
                title: "未查询到宿舍信息",
                icon: "none",
              });
            }
          },
          cancel: () => {

          },
        });
      }
    },
    toNumber(str) {
      return this.dormitoryInfo.ridersBillInfo[str]?parseInt(this.dormitoryInfo.ridersBillInfo[str]):0
    },
    async getLodgingListByOpenIdAndMonth(){
      console.log(this.isAdmin,uni.getStorageSync("isAdmin"))
      if (this.isAdmin) {
        return
      }
      let {data} = await this.$api.dormitory.getLodgingListByOpenIdAndMonth(this.openId)
      if (data && data[0]) {
        this.dormitoryInfo = data[data.length - 1]

      }
    },
    goInfo(){
      uni.navigateTo({
        url: `/pages/serve/info/webIndex?billId=${this.dormitoryInfo.ridersBillInfo.id}&id=${this.dormitoryInfo.ridersLodging.id}&activeType=${this.dormitoryInfo.ridersBillInfo.billType==1?'0':'1'}`
      })
    }
  }
}
</script>
<style lang='scss'>
.cate-section {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap:wrap;
  padding: 30upx 0upx;
  background: #fff;
  .cate-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: $font-sm + 2upx;
    color: $font-color-dark;
  }
  /* 原图标颜色太深,不想改图了,所以加了透明度 */
  image {
    width: 88upx;
    height: 88upx;
    margin-bottom: 14upx;
    border-radius: 50%;
    opacity: .7;
    box-shadow: 4upx 4upx 20upx rgba(250, 67, 106, 0.3);
  }
}
%flex-center {
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
%section {
  display:flex;
  justify-content: space-around;
  align-content: center;
  background: #fff;
  border-radius: 10upx;
}

.user-section{
  height: 520upx;
  padding: 100upx 30upx 0;
  position:relative;
  .bg{
    position:absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    //filter: blur(1px);
    //opacity: .7;
  }
}
.user-info-box{
  height: 180upx;
  display:flex;
  align-items:center;
  position:relative;
  z-index: 1;
  .portrait{
    width: 130upx;
    height: 130upx;
    border:5upx solid #fff;
    border-radius: 50%;
  }
  .username{
    font-size: $font-lg + 6upx;
    color: $font-color-dark;
    margin-left: 20upx;
    color: #fff;
  }
}

.vip-card-box{
  display:flex;
  flex-direction: column;
  color: #f7d680;
  height: 240upx;
  background: linear-gradient(left, rgba(0,0,0,.7), rgba(0,0,0,.8));
  border-radius: 16upx 16upx 0 0;
  overflow: hidden;
  position: relative;
  padding: 20upx 24upx;
  .card-bg{
    position:absolute;
    top: 20upx;
    right: 0;
    width: 380upx;
    height: 260upx;
  }
  .b-btn{
    position: absolute;
    right: 20upx;
    top: 16upx;
    width: 132upx;
    height: 40upx;
    text-align: center;
    line-height: 40upx;
    font-size: 22upx;
    color: #36343c;
    border-radius: 20px;
    background: linear-gradient(left, #f9e6af, #ffd465);
    z-index: 1;
  }
  .tit{
    font-size: $font-base+2upx;
    color: #f7d680;
    margin-bottom: 28upx;
    .yticon{
      color: #f6e5a3;
      margin-right: 16upx;
    }
  }
  .e-b{
    font-size: $font-sm;
    color: #d8cba9;
    margin-top: 10upx;
  }
}
.cover-container{
  background: $page-color-base;
  padding: 0 30upx;
  position:relative;
  background: #f5f5f5;
  padding-bottom: 20upx;
  padding-top: 20rpx;
  .arc{
    position:absolute;
    left: 0;
    top: -34upx;
    width: 100%;
    height: 36upx;
  }
}
.tj-sction{
  @extend %section;
  .tj-item{
    @extend %flex-center;
    flex-direction: column;
    height: 140upx;
    font-size: $font-sm;
    color: #75787d;
  }
  .num{
    font-size: $font-lg;
    color: $font-color-dark;
    margin-bottom: 8upx;
  }
}
.order-section{
  @extend %section;
  padding: 28upx 0;
  margin-top: 20upx;
  .order-item{
    @extend %flex-center;
    width: 120upx;
    height: 120upx;
    border-radius: 10upx;
    font-size: $font-sm;
    color: $font-color-dark;
  }
  .yticon{
    font-size: 48upx;
    margin-bottom: 18upx;
    color: #fa436a;
  }
  .icon-shouhoutuikuan{
    font-size:44upx;
  }
}
.history-section{
  padding: 20upx 0 0;
  margin-top: 20upx;
  background: #fff;
  border-radius:20upx;
  overflow: hidden;
  .sec-header{
    font-size: 28rpx;
    display:flex;
    align-items: center;
    font-size: $font-base;
    color: $font-color-dark;
    line-height: 40upx;
    margin-left: 10upx;
    .yticon{
      font-size: 44upx;
      color: #5eba8f;
      margin-right: 16upx;
      line-height: 40upx;
    }
    .sec-header-inner{
      display: flex;align-items: center;justify-content: space-between;width: 100%
     }
  }
  .pay-tag{
    padding: 0 6rpx;
    border-radius: 5rpx;
    font-size: 28rpx;
    font-weight: 550;
  }
  .expenses-box{
    display: flex;justify-content: space-around;align-self: center;
  }
  .expenses-box-item{
    display: flex;justify-content: center;align-self: center;flex-direction: column;font-size:24rpx
  }
  .h-list{
    white-space: nowrap;
    padding: 30upx 30upx 0;
    image{
      display:inline-block;
      width: 160upx;
      height: 160upx;
      margin-right: 20upx;
      border-radius: 10upx;
    }
  }
}

</style>
